/*项目详情*/
<template>
    <view class="box">
        <!-- <u-navbar title="阀贸通" placeholder autoBack border></u-navbar> -->
        <view class="header">「阀贸通」招采信息一键查询 </view>
        <!-- 请退出重试 -->
        <view class="item" style="margin-top: 300rpx;" v-if="!info.id">
            <u-empty text="暂无数据,请退出重进" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
        </view>
        <view class="title" v-if="info.id">
            <view class="content">{{ info.title }}</view>
            <view class="flex flex-jc-sb flex-ai-c">
                <view class="flex">
                    <view class="flex flex-ai-c">
                        <image src="../../static/zbgg@3x.png" style="width: 31rpx; height: 30rpx; margin-right: 10rpx;" />
                        <view>项目公告</view>
                    </view>
                    <view class="flex flex-ai-c" style="margin-left: 50rpx;">
                        <image src="../../static/dz2@3x.png" style="width: 23rpx; height: 30rpx; margin-right: 10rpx;" />
                        <view>{{ optionsProvice(info.provinceCode) }}</view>
                    </view>
                </view>
                <view class="flex flex-ai-c">
                    <image src="../../static/nl@3x.png" style="width: 31rpx; height: 30rpx; margin-right: 10rpx;" />
                    <view>{{ timestampToTime(info.createTime).slice(0, 11) }}</view>
                </view>
            </view>
        </view>
        <!-- <view class="unit">
            <view class="unit-title flex flex-ai-c">
                <view></view>
                <text>项目单位</text>
            </view>
            <view class="flex">
                <image src="../../static/zbdwtb@3x.png" style="width: 111rpx; height: 111rpx; margin-right: 20rpx;" />
                <view class="unit-name">
                    <view>{{ info.name }}</view>
                </view>
            </view>
        </view> -->
        <view class="details" v-if="info.id">
            <view class="details-title flex flex-ai-c">
                <view></view>
                <text>联系方式</text>
            </view>
            <view class="unit-name flex flex-ai-c">
                <text>甲方联系人:</text>
                <view>{{ JSON.parse(info.project).contact == "null" || "" ? '暂无' : JSON.parse(info.project).contact }}
                </view>
                <u-button type="primary" size="mini" @click="handleCopy(JSON.parse(info.project).contact)"
                    style="height: 40rpx; margin: 0;">复制</u-button>
            </view>
            <view class="unit-name flex flex-ai-c">
                <text>甲方联系方式:</text>
                <view>{{ JSON.parse(info.project).tel == "null" || "" ? '暂无' : JSON.parse(info.project).tel }}</view>
                <u-button type="primary" size="mini" @click="handleCopy(JSON.parse(info.project).tel)"
                    style="height: 40rpx; margin: 0;">复制</u-button>
            </view>
        </view>
        <view class="details" v-if="info.id">
            <view class="details-title flex flex-ai-c">
                <view></view>
                <text>项目概况</text>
            </view>
            <mp-html :content="info.content" />
        </view>
        <!-- <view class="details" v-if="info.id">
            <view class="details-title flex flex-ai-c">
                <view></view>
                <text>联系方式</text>
            </view>
            <rich-text :nodes="info.contactInfo"></rich-text>
        </view> -->

    </view>
</template>

<script>
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'
export default {
    data() {
        return {
            id: "",
            info: {
                createTime: ""
            },
            // 省列表
            optionsProviceCode: [{
                "label": "北京市",
                "value": "110000"
            }, {
                "label": "天津市",
                "value": "120000"
            }, {
                "label": "河北省",
                "value": "130000"
            }, {
                "label": "山西省",
                "value": "140000"
            }, {
                "label": "内蒙古自治区",
                "value": "150000"
            }, {
                "label": "辽宁省",
                "value": "210000"
            }, {
                "label": "吉林省",
                "value": "220000"
            }, {
                "label": "黑龙江省",
                "value": "230000"
            }, {
                "label": "上海市",
                "value": "310000"
            }, {
                "label": "江苏省",
                "value": "320000"
            }, {
                "label": "浙江省",
                "value": "330000"
            }, {
                "label": "安徽省",
                "value": "340000"
            }, {
                "label": "福建省",
                "value": "350000"
            }, {
                "label": "江西省",
                "value": "360000"
            }, {
                "label": "山东省",
                "value": "370000"
            }, {
                "label": "河南省",
                "value": "410000"
            }, {
                "label": "湖北省",
                "value": "420000"
            }, {
                "label": "湖南省",
                "value": "430000"
            }, {
                "label": "广东省",
                "value": "440000"
            }, {
                "label": "广西壮族自治区",
                "value": "450000"
            }, {
                "label": "海南省",
                "value": "460000"
            }, {
                "label": "重庆市",
                "value": "500000"
            }, {
                "label": "四川省",
                "value": "510000"
            }, {
                "label": "贵州省",
                "value": "520000"
            }, {
                "label": "云南省",
                "value": "530000"
            }, {
                "label": "西藏自治区",
                "value": "540000"
            }, {
                "label": "陕西省",
                "value": "610000"
            }, {
                "label": "甘肃省",
                "value": "620000"
            }, {
                "label": "青海省",
                "value": "630000"
            }, {
                "label": "宁夏回族自治区",
                "value": "640000"
            }, {
                "label": "新疆维吾尔自治区",
                "value": "650000"
            }, {
                "label": "台湾",
                "value": "660000"
            }, {
                "label": "香港",
                "value": "670000"
            }, {
                "label": "澳门",
                "value": "680000"
            }],
        }
    },
    components: {
        mpHtml
    },
    onLoad(params) {
        // console.log(params);
        uni.showLoading({
            title: '加载中...',
            mask: true,
        });
        uni.$req.post('/famenApi/system/integral/getInfo3', params).then(res => {
            uni.hideLoading();
            if (res.code == "200") {
                console.log(res);
                this.info = res.data
                console.log(this.info);
            } else if (res.code == "500") {
                uni.showToast({
                    title: "权限已丢失，请退出重试",
                    icon: 'none',
                    duration: 2000
                });
                /* uni.navigateBack({
                    delta: 1
                }) */
            }
        });

        uni.request({
            url:'http://open.gc-zb.com/markInfo/project',
            data:{
                nid:"1234567890"
            },
            methods:'post',
            headers:{
                'content-type':'application/x-www-form-urlencoded'
            },
            success:(res)=>{
                console.log(res);
            }
        }).then((result) => {
            console.log(result);
        })
    },
    methods: {
        handleCopy(item) {
            uni.setClipboardData({ data: item })
            uni.showToast({
                title: "复制成功",
                icon: 'none',
                duration: 2000
            })
        },
        // 筛选省
        optionsProvice(item) {
            let name = ''
            this.optionsProviceCode.filter((v) => {
                if (v.value == item) {
                    name = v.label
                }
            })
            // console.log(`传入:${item}，结果:${name}`)
            return name
        },
        // 转变时间戳
        timestampToTime(timestamp) {
            var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + "-";
            var M =
                (date.getMonth() + 1 < 10
                    ? "0" + (date.getMonth() + 1)
                    : date.getMonth() + 1) + "-";
            var D = date.getDate() + " ";
            var h = date.getHours();
            h = h >= 10 ? h : "0" + h
            var m = date.getMinutes();
            m = m >= 10 ? m : "0" + m
            var s = date.getSeconds();
            s = s >= 10 ? s : "0" + s
            return Y + M + D + h + ":" + m + ":" + s;
        },
    }
}
</script>

<style lang="scss" scoped>
.header {
    height: 133rpx;
    line-height: 133rpx;
    font-weight: 600;
    background: linear-gradient(to top, #015EEA 0%, #00C0FA 100%);
    font-size: 53rpx;
    color: #FFFFFF;
    text-align: center;
}

.title {
    height: 200rpx;
    margin-bottom: 20rpx;
    padding: 25rpx 23rpx 22rpx 20rpx;
    background-color: #fff;

    .content {
        font-weight: 500;
        font-size: 35rpx;
        color: #242424;
        line-height: 42rpx;
        height: 84rpx;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        margin-bottom: 20rpx;
    }
}

.unit {
    padding: 32rpx 55rpx 32rpx 20rpx;
    background-color: #fff;
    margin-bottom: 26rpx;

    .unit-title {
        margin-bottom: 26rpx;

        view {
            width: 11rpx;
            height: 41rpx;
            background: #0059B9;
            border-radius: 8rpx;
            margin-right: 10rpx;
        }

        text {
            font-family: SimHei;
            font-weight: 600;
            font-size: 35rpx;
            color: #1D1D1D;
        }
    }

    .unit-name {
        width: 80%;
        font-size: 33rpx;
        color: #1D1D1D;
        line-height: 44rpx;

        view {
            height: 40rpx;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 20rpx;
        }

        text {
            height: 29rpx;
            font-size: 30rpx;
            color: #616161;
            line-height: 44rpx;
        }
    }
}

.details {
    overflow: auto;
    padding: 32rpx 55rpx 32rpx 20rpx;
    background-color: #fff;
    margin-bottom: 26rpx;

    // table tr{
    //     width: 100% !important;
    //     display: inline-block;
    // }
    table {
        font-size: 10px;
        border-collapse: collapse;
    }

    table td {
        // width: 100%;
        // height: 100% !important;
        border: 1px solid #000;
        padding: 5px 10px;
        margin: 0 !important;
        // display: inline-block;
    }

    ul li {
        list-style-type: none;
    }

    .unit-name {
        width: 100%;
        height: 29rpx;
        font-size: 30rpx;
        color: #616161;
        line-height: 44rpx;
        margin-bottom: 10rpx;

        view {
            // margin-bottom: 20rpx;
            margin: 0 20rpx;
        }
    }

    .details-title {
        margin-bottom: 26rpx;

        view {
            width: 11rpx;
            height: 41rpx;
            background: #0059B9;
            border-radius: 8rpx;
            margin-right: 10rpx;
        }

        text {
            font-family: SimHei;
            font-weight: 600;
            font-size: 35rpx;
            color: #1D1D1D;
        }
    }
}
</style>